<template>
  <div class="profile-container">
    <el-card>
      <div slot="header">
        <span>个人信息</span>
      </div>
      <el-form :model="profileForm" :rules="rules" ref="profileForm" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="profileForm.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="profileForm.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="profileForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="profileForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="修改密码" prop="password">
          <el-input v-model="profileForm.password" type="password" placeholder="不修改请留空"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleUpdate" :loading="loading">保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { updateProfile } from '@/api/admin'

export default {
  name: 'AdminProfile',  // Changed from 'Profile' to 'AdminProfile'
  data() {
    return {
      loading: false,
      profileForm: {
        username: '',
        name: '',
        email: '',
        phone: '',
        password: '',
        idNum:'35082320030608461X'
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    const adminInfo = JSON.parse(localStorage.getItem('adminInfo') || '{}')
    this.profileForm = {
      username: adminInfo.username || '',
      name: adminInfo.name || '',
      email: adminInfo.email || '',
      phone: adminInfo.phone || '',
      password: ''
    }
  },
  methods: {
    handleUpdate() {
      this.$refs.profileForm.validate(async valid => {
        if (valid) {
          this.loading = true
          try {
            const res = await updateProfile(this.profileForm)
            if (res.code === 200) {
              this.$message.success('更新成功')
              // 更新本地存储的用户信息
              const adminInfo = JSON.parse(localStorage.getItem('adminInfo') || '{}')
              const newAdminInfo = { ...adminInfo, ...this.profileForm }
              delete newAdminInfo.password
              localStorage.setItem('adminInfo', JSON.stringify(newAdminInfo))
            } else {
              this.$message.error(res.msg || '更新失败')
            }
          } catch (error) {
            console.error('更新失败:', error)
            this.$message.error('更新失败，请稍后重试')
          } finally {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  padding: 20px;
  
  .el-card {
    max-width: 600px;
    margin: 0 auto;
  }
}
</style>